<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好，大学</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        * {
            padding: 0em;
            margin: 0em;
            box-sizing: border-box;
        }

        a {
            display: inline-block;
            color: #3d8cd8;
            background-color: #eff7ff;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
            cursor: pointer;
        }

        .mycontainer {
            margin: 0em !important;
            font-size: 14px;
            line-height: 28px;
            background-color: rgb(243, 243, 243);
        }

        #box {
            margin: 0em auto;
            width: 80%;
        }

        .header {
            width: 100%;
            padding: 2em;
            background-color: #fff;
            border-bottom: 1px solid rgb(223, 223, 223);
            display: flex;
            flex-direction: row;
            border-left: 1px solid rgb(223, 223, 223);
            border-right: 1px solid rgb(223, 223, 223);
        }

        .header_left {
            flex: 3;
        }

        .header_right {
            flex: 1;
        }

        .header_right img {
            width: 90%;
            margin: 10px;
            border: 1px solid rgb(221, 221, 221);
        }

        .header #text {
            text-indent: 2em;
        }

        .header #text a {
            background-color: #fff;
            text-indent: 2em;
        }

        .header .first_bottom ul {
            display: flex;
            width: 100%;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 20px 0px;
        }

        .header .first_bottom ul li {
            list-style: none;
            line-height: 20px;
            width: 50%;
        }

        .header .first_bottom ul li a {
            background-color: #fff;
            margin: 0px 10px;
        }

        .body_header {
            margin-top: 20px;
            height: 50px;
            width: 100%;
        }

        .body_header ul {
            height: 50px;
            background-color: rgb(224, 224, 224);
            line-height: 50px;
        }

        .body_header ul li {
            float: left;
            padding: 0px 20px;
            font-size: 18px;
            list-style: none;
        }

        .body_header ul li:first-of-type {
            background-color: #3d8cd8;
        }

        .body {
            background-color: #fff;
            border-left: 1px solid rgb(223, 223, 223);
            border-right: 1px solid rgb(223, 223, 223);
            padding: 0px 20px;
        }

        .body {
            width: 100%;
        }

        .body .message {
            width: 100%;
            overflow: hidden;
        }

        .body table {
            width: 100%;
        }

        .body table {
            border-collapse: collapse;
        }

        .body table td {
            border-bottom: 1px dashed gray;
        }

        .body a {
            background-color: #fff;
            margin: 0px 2px;
        }

        .p {
            text-indent: 2em;
        }

        .p a {
            text-indent: 0em;
            background-color: #fff;
        }

        .text_in {
            font-size: .15in;
        }

        .text_cm {
            font-size: .4cm;
        }
    </style>
</head>
<body>
<div class="mycontainer">
    <div id="box">

        <!-- 头部区 -->
        <div class="body_header">
            <ul>
                <li>学校概况</li>
            </ul>
        </div>
        <!-- 主体部分 -->
        <div class="header">
            <div class="header_left">
                <h1 class="schoolName">
                    <!-- 院校名称 -->
                </h1>
                <div class="label">
                    <form class="form-inline" role="form" id="schoolLabel" style="text-align: left; ">
                        <!-- 标签 -->
                    </form>
                </div>
                <div id="text" class="text_cm" style="white-space: pre-line;">
                    <!--院校简介-->
                </div>
                <div class="first_bottom">
                    </br>
                </div>
            </div>
            <div class="header_right">
                <img id="logo" src="/images/logo.jpg"/>
            </div>
        </div>
        <br/>

        <!-- 基础信息 -->
        <div class="body_header">
            <ul>
                <li>基础信息</li>
            </ul>
        </div>
        <!-- 主体部分 -->
        <div class="body">
            <!-- 基本信息表格区 -->
            <div class="message">
                <h3>基本信息</h3>
                <table>
                    <tr>
                        <td>院校</td>
                        <td id="chineseName"></td>
                        <td>创办时间</td>
                        <td id="createTime"></td>
                    </tr>
                    <tr>
                        <td>办学性质</td>
                        <td id="schoolNature"></td>
                        <td>学校类型</td>
                        <td id="schoolType"></td>
                    </tr>
                    <tr>
                        <td>学校特色</td>
                        <td id="schoolCharacteristics"></td>
                        <td>学校标签</td>
                        <td id="label"></td>
                    </tr>
                    <tr>
                        <td>院校代码</td>
                        <td id="schoolId"></td>
                        <td>校训</td>
                        <td id="schoolMotto"></td>
                    </tr>
                    <tr>
                        <td>学校地址</td>
                        <td id="schoolAddress"></td>
                    </tr>
                </table>
            </div>
        </div>
        </br>

        <!-- 历史录取分数线  -->
        <div class="body_header">
            <ul>
                <li>历史录取分数线</li>
            </ul>
        </div>
        <div class="body">
            <!-- 筛选框 -->
            <div style="height: 40px">
                <div style="height: 5px"></div>
                <div class="container">
                    <div class="col-xs-4">
                        <label>选择生源地&emsp;</label>
                        <select name="province" style="width: 100px" id="province">
                            <option value="北京">北京</option>
                            <option value="天津">天津</option>
                            <option value="河北">河北</option>
                            <option value="山西">山西</option>
                            <option value="内蒙古">内蒙古</option>
                            <option value="辽宁">辽宁</option>
                            <option value="吉林">吉林</option>
                            <option value="黑龙江">黑龙江</option>
                            <option value="上海">上海</option>
                            <option value="江苏">江苏</option>
                            <option value="浙江">浙江</option>
                            <option value="安徽">安徽</option>
                            <option value="福建">福建</option>
                            <option value="江西">江西</option>
                            <option value="山东">山东</option>
                            <option value="河南">河南</option>
                            <option value="湖北">湖北</option>
                            <option value="湖南" selected>湖南</option>
                            <option value="广东">广东</option>
                            <option value="广西">广西</option>
                            <option value="海南">海南</option>
                            <option value="重庆">重庆</option>
                            <option value="四川">四川</option>
                            <option value="贵州">贵州</option>
                            <option value="云南">云南</option>
                            <option value="西藏">西藏</option>
                            <option value="陕西">陕西</option>
                            <option value="甘肃">甘肃</option>
                            <option value="青海">青海</option>
                            <option value="宁夏">宁夏</option>
                            <option value="新疆">新疆</option>
                        </select>
                    </div>
                    <div class="col-xs-4">
                        <label>年份&emsp;</label>
                        <select name="year" style="width: 100px" id="year">
                            <option value="2021" selected>2021</option>
                            <option value="2020">2020</option>
                            <option value="2019">2019</option>
                        </select>
                    </div>
                    <div class="col-xs-4">
                        <label>批次&emsp;</label>
                        <select name="batch" style="width: 100px" id="batch">
                            <option value="本科批" selected>本科批</option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- 表单 -->
            <table id="historyTable" class="table table-hover">
                <tr>
                    <th style="display:none">院校代码</th>
                    <th style="display:none">地区</th>
                    <th style="display:none">年份</th>
                    <th>批次</th>
                    <th>类型</th>
                    <th>最低分数线</th>
                    <th>最低分排名</th>
                    <th>专业组</th>
                    <th>要求</th>
                </tr>
                <tbody id="scoreLineBody">

                </tbody>
            </table>
        </div>
        <br/>

        <!-- 专业清单表格区 -->
        <div class="body_header">
            <ul>
                <li>专业清单</li>
            </ul>
        </div>
        <div class="body">
            <div style="height: 40px">
                <div style="height: 5px"></div>
                <div class="container">
                    <div class="col-xs-4">
                        <label>专业查询&emsp;</label>
                        <input name="key" type="text" id="name" style="height: 25px; width: 80px"
                               onkeydown="onSearch()" value=""/>
                    </div>
                    <div class="col-xs-4">
                        <label>特色专业&emsp;</label>
                        <input name="key" type="checkbox" id="specialty" style="height: 15px; width: 15px"
                               onchange="onSearch()" checked>
                    </div>
                    <div class="col-xs-4">
                        <label>类型查询&emsp;</label>
                        <input name="key" type="text" id="typeKey" style="height: 25px; width: 80px"
                               onkeydown="onSearch()" value=""/>
                    </div>
                </div>
            </div>
            <table class="table table-hover" id="majorTable">
                <tr>
                    <th style="width:200px">专业</th>
                    <th>特色</th> <!--放特色标签-->
                    <th>类型</th>
                    <th>批次</th>
                    <th>学制</th>
                </tr>
                <tbody id="majorBody">
                <!-- 院校开设专业信息 -->
                </tbody>
            </table>
        </div>
        <!-- 结束部分 -->
        <div class="over"></br></div>
    </div>
</div>

<!-- 模态框 -->
<div class="modal fade" id="showMajor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    专业信息卡片
                </h4>
            </div>

            <form class="form-horizontal">
                <div class="modal-body" id="major_content">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- js部分 -->
<script type="text/javascript">
    //通过url取指定参数
    function getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] === variable) {
                return decodeURI(pair[1]);
            }
        }
        return false;
    }

    //加载页面时调用，通过ajax获取页面数据
    $(document).ready(function () {
        //ajax加载院校信息
        let name = getQueryVariable('schoolName');
        let search = {};
        search["name"] = name;
        $.ajax({
            url: 'http://localhost:8080/getUniversity',
            type: 'post',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(search),
            success: function (data) {
                tableData(data);
                console.log(data)
            }
        })

        //加载专业信息
        $.ajax({
            url: 'http://localhost:8080/getMajorOffered',
            type: 'post',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(search),
            success: function (data) {
                majorTable(data);
            }
        })

        //加载历史分数线
        $.ajax({
            url: 'http://localhost:8080/getEntryScoreLine',
            type: 'post',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(search),
            success: function (data) {
                historyTableData(data);
            }
        })
    });

    // 表单数据
    function tableData(data) {
        document.querySelector('.schoolName').innerHTML = data.schoolName;
        document.querySelector('#chineseName').innerHTML = data.schoolName;
        document.querySelector('#createTime').innerHTML = data.foundingTime;
        document.querySelector('#schoolNature').innerHTML = data.schoolNature;
        document.querySelector('#schoolId').innerHTML = data.id;
        document.querySelector('#schoolMotto').innerHTML = '<a>' + data.schoolMotto + '</a>';
        document.querySelector('#schoolType').innerHTML = data.schoolType;
        document.querySelector('#logo').src = data.schoolBadge;
        document.querySelector('#text').innerHTML = data.schoolProfile;
        //院校标签
        let element = document.querySelector('#label');
        let schoolLabel = document.querySelector('#schoolLabel');
        for (let i = 0; i < data.label.length; i++) {
            let span = document.createElement('span');
            span.classList.add("label");
            span.classList.add("label-primary");
            span.classList.add("text_in");
            span.innerHTML = data.label[i];
            schoolLabel.appendChild(span);
            schoolLabel.innerHTML += '&emsp;';
            element.innerHTML += data.label[i] + "  ";
        }
        //院校地址
        element = document.querySelector('#schoolAddress');
        for (let i = 0; i < data.schoolAddress.length; i++) {
            element.innerHTML += data.schoolAddress[i] + "</br>";
        }
        //学校特色
        let schoolCharacter = document.querySelector('#schoolCharacteristics');
        console.log(data.schoolCharacteristics instanceof Array)
        for (let i = 0; i < data.schoolCharacteristics.length; i++) {
            let a = document.createElement('div');
            console.log(1);
            a.innerHTML = data.schoolCharacteristics[i];
            schoolCharacter.appendChild(a);
        }
        onSearch();
    }

    //历史分数线
    function historyTableData({entryScores}) {
        let table = document.querySelector('#scoreLineBody');
        for (let i = 0; i < entryScores.length; i++) {
            let tr = document.createElement('tr');
            table.appendChild(tr);
            let objarr = Object.keys(entryScores[i]);
            for (let j = 0; j < objarr.length; j++) {
                let td = document.createElement('td');
                if (j < 3) {
                    td.style.cssText = 'display:none';
                }
                td.innerHTML = entryScores[i][objarr[j]];
                tr.appendChild(td);
            }
        }
        onSelect();
    }

    //展示专业清单
    function majorTable(data) {
        let majorBody = document.querySelector('#majorBody');
        for (let i = 0; i < data.data.length; i++) {
            let html = '<tr onclick="selectMajor(this)">\n' +
                '<td>' + data.data[i].professionName + '</td>\n' +
                '<td>' + '<span class="label label-primary">';
            if (!$.isEmptyObject(data.data[i].specialty)) {
                html += data.data[i].specialty;
            }
            html += '</span>' + '</td>' +
                '<td>' + data.data[i].professionType + '</td>\n' +
                '<td>' + data.data[i].batch + '</td>\n' +
                '<td>' + data.data[i].educationalSystem + '</td>\n' +
                '</tr>';
            majorBody.innerHTML += html;
        }
        onSearch();
    }

    //专业清单专业信息点击事件
    function selectMajor(obj) {
        let search = {};
        search['name'] = $(obj).find('td').eq(0).text();
        $.ajax({
            url: 'http://localhost:8080/getMajor',
            type: 'post',
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(search),
            success: function (data) {
                if (data.code === 1) {
                    alert("查找失败!");
                } else {
                    $('#showMajor').modal("show");
                    let html = '<p style="font-size: large;color: #3d8cd8">' + data.data.professionName + '</p>>' + '<p>&emsp;' + data.data.professionIntroduce + '</p>';
                    $('#major_content').html(html);
                }
            }
        })
    }

    //专业清单筛选
    function onSearch() {//js函数开始
        setTimeout(function () {//因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取
            let storeId = document.getElementById('majorTable');//获取table的id标识
            let rowsLength = storeId.rows.length;//表格总共有多少行
            if ($('#specialty').is(':checked') === true) {
                let name = $('#name').val();//获取输入框的值
                let type = $('#typeKey').val();
                for (let i = 1; i < rowsLength; i++) {
                    if (!(storeId.rows[i].cells[1].innerText === "")) {
                        let searchText = storeId.rows[i].cells[0].innerHTML;//取得table行，列的值
                        let typeText = storeId.rows[i].cells[2].innerHTML;
                        if (searchText.match(name) && typeText.match(type)) {//用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，
                            storeId.rows[i].style.display = '';
                        } else {
                            storeId.rows[i].style.display = 'none';
                        }
                    } else {
                        storeId.rows[i].style.display = 'none';//隐藏行操作
                    }
                }
            } else {
                let name = $('#name').val();//获取输入框的值
                let type = $('#typeKey').val();
                //要搜索的哪一列，这里是第一列，从0开始数起
                for (let i = 1; i < rowsLength; i++) {//按表的行数进行循环
                    let searchText = storeId.rows[i].cells[0].innerHTML;//取得table行，列的值
                    let typeText = storeId.rows[i].cells[2].innerHTML;
                    if (searchText.match(name) && typeText.match(type)) {//用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，
                        storeId.rows[i].style.display = '';//显示行操作，
                    } else {
                        storeId.rows[i].style.display = 'none';//隐藏行操作
                    }
                }
            }

        }, 100);//100为延时时间
    }

    //历史录取分数线筛选器绑定
    $('#province').change(function () {
        onSelect();
    });
    $('#year').change(function () {
        onSelect();
    });
    $('#batch').change(function () {
        onSelect();
    })

    //历史录取分数线筛选
    function onSelect() {//js函数开始
        setTimeout(function () {
            let storeId = document.getElementById('historyTable');//获取table的id标识
            let rowsLength = storeId.rows.length;//表格总共有多少行
            let province = $("#province").val();
            let year = $('#year').val();
            let batch = $('#batch').val();
            //要搜索的哪一列，这里是第一列，从0开始数起
            for (let i = 1; i < rowsLength; i++) {//按表的行数进行循环
                let provinceText = storeId.rows[i].cells[1].innerHTML;
                let yearText = storeId.rows[i].cells[2].innerHTML;
                let batchText = storeId.rows[i].cells[3].innerHTML;
                if (provinceText.match(province) && yearText === year && batchText.match(batch)) {
                    storeId.rows[i].style.display = '';//显示行操作，
                } else {
                    storeId.rows[i].style.display = 'none';//隐藏行操作
                }
            }
        }, 100);//100为延时时间
    }

</script>

</body>
</html>